<template>
  <div class="login">
    <div class="box">
      <div class="pre-box" :class="preTransForm">
        <h1>WELCOME</h1>
        <p>JOIN US!</p>
        <div class="img-box">
          <img :src="imgSrc" alt="" />
        </div>

      </div>

      <div class="register-form">
        <div class="title-box">
          <h1>注册</h1>
        </div>

        <div class="input-box">
          <input type="text" @blur="onCheck(registerForm.username,'用户名')" v-model="registerForm.username" placeholder="用户名">
          <input type="password" @blur="onCheck(registerForm.password,'密码')" v-model="registerForm.password" placeholder="密码">
          <input type="password" @blur="onCheck(registerForm.twoPassword,'确认密码')" v-model="registerForm.twoPassword" placeholder="确认密码">
        </div>
        <div class="btn-box">
          <button>注册</button>
          <p @click="mySwitch">已有账号?去登录</p>
        </div>

      </div>

      <div class="login-form" >
          <div class="title-box">
            <h1>登录</h1>
          </div>

          <div class="input-box" >
            <input type="text"  @blur="onCheck(loginForm.username,'用户名')" v-model="loginForm.username" placeholder="用户名">
            <input type="password" @blur="onCheck(loginForm.password,'密码')" v-model="loginForm.password" placeholder="密码">
            <input type="text" @blur="onCheck(loginForm.code,'验证')" v-model="loginForm.code" placeholder="验证码" style="width: 30%;margin-left: -152px">
            <img @click="getCaptcha" :src="captchaImg" style="width: 30%;height: 40px;margin-top: -60px;margin-right: -162px" />

          </div>
          <div class="btn-box">
            <button @click="loginSubmit">登录</button>
            <p @click="mySwitch">没有账号?去注册</p>
          </div>
      </div>

    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "Login",
  data(){
    return{
      flag:true,
      imgSrc:require(''+'../assets/1.jpg'+''),
      preTransForm:"pre_register",
      loginForm:{
        username:"",
        password:"",
        key:"",
        code:""
      },
      registerForm:{
        username:"",
        password: "",
        twoPassword:""
      },
      captchaImg:null


    }
  },
  methods:{
    mySwitch(){

      if (this.flag){

        this.preTransForm="pre_login"
        this.imgSrc=require(''+'../assets/1.jpg'+'');

      }else{

        this.preTransForm="pre_register"
        this.imgSrc=require(''+'../assets/1.jpg'+'');
      }
      this.flag=!this.flag;
    },
    loginSubmit(){
      if (this.submitCheck()){
        this.$axios.post('/login?'+ qs.stringify(this.loginForm)).then(res => {

          console.log(res)

          const jwt = res.headers['authorization']

          this.$store.commit('SET_TOKEN', jwt)
          this.$router.push("/index")
        })
      }
    },
    getCaptcha(){
          this.$axios.get('/captcha').then(res=>{


            console.log(res.data.data.captchaImg)
          this.loginForm.key = res.data.data.key;
          this.captchaImg = res.data.data.captchaImg ;

      })
    },
    submitCheck(){
      if (this.loginForm.username==null||this.loginForm.username==''){
        this.openError("用户名不能为空")
        return false;
      }else if (this.loginForm.password==null||this.loginForm.password==''){
        this.openError("密码不能为空")
        return false;
      }else if (this.loginForm.code==null||this.loginForm.code==''){
        this.openError("验证码不能为空")
        return false;
      }
      return true;

    },
    openSuccess(str){
      this.$message({
        message:str,
        type:'success'
      });
    },
    openError(str){
      this.$message.error(str);
    },
    onCheck(value,str){
      if (value==null || value==''){
        var meassge = str+"不能为空";
        this.openError(meassge);
      }
    }

  },
  created() {
    this.getCaptcha();
  },
  computed:{

  }

}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input{
  outline: none;
}


.login{
  height: 690px;
  width: 100%;
  display: flex;
  background-image: url("../assets/2.jpg");
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #FFFFFF;
}
.box{
  width: 1050px;
  height: 600px;
  display: flex;
  /*background-color: #fff;*/
  margin: auto;
  border-radius: 8px;
  border: 1px solid rgb(255,255,255,.1);
  box-shadow: 4px 4px 3px rgb(0,0,0,.1);
  position: relative;


}
.pre-box{
  width: calc(1050px/2);
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  background-color: #edd4dc;
  box-shadow:4px 4px 3px rgb(0,0,0,.1) ;

}
.pre-box h1{
  margin-top: 150px;
  text-align: center;
  letter-spacing: 5px;
  text-shadow:4px 4px 3px rgb(0,0,0,.1) ;
  color: white;
}
.pre-box p{
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 20px 0;
  color: white;
  font-weight: bold;
}
.img-box{
  width: 200px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 50%;
  text-shadow:4px 4px 3px rgb(0,0,0,.1) ;

}
.img-box img{
  width: 100%;
  height: 100%;
}


.login-form,.register-form{
  flex: 1;
  height: 100%;
}
.title-box{
  height: 300px;
  line-height: 500px;
}
.title-box h1{
  text-align: center;
  letter-spacing: 5px;
  color: white;
  text-shadow:4px 4px 3px rgb(0,0,0,.1) ;
}
.input-box{
  display: flex;
  flex-direction: column;
  align-items: center;
}
input{
  width: 60%;
  height: 40px;
  margin-bottom: 20px;
  text-indent: 4px;
  border: 1px solid #b0cfe9;

  border-radius: 4px;
}
input:focus{
  color: #b0cfe9;
}
input:focus::placeholder{
  opacity: 0;
}

.btn-box{
  margin-top: 15px;
  display: flex;
  justify-content: center;

}
button{
  width: 100px;
  height: 30px;
  margin: 0 7px;
  line-height: 30px;
  border: none;
  border-radius: 4px;
  background-color: #69b3f0;
  color: white;

}
button:hover{
  cursor: pointer;
  opacity: .8;
}
.btn-box p{
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: white;
}
.btn-box p:hover{
  cursor: pointer;
  border-bottom: 1px solid white;
}

.pre_login{
  transform: translateX(100%);


  background-color: #c9e0ed;
}
.pre_register{
  transform: translateX(0%);


  background-color: #edd4dc;
}





</style>
